'use client';

import React from 'react';
import Title from '../Title';
import Box from './Box';
import one from '../../images/t01.svg';
import two from '../../images/t02.svg';
import three from '../../images/t03.svg';
import four from '../../images/t04.svg';
import five from '../../images/t05.svg';
import six from '../../images/6.png';
import { Space, Flex } from 'antd';
import { useGlobeData } from '@/app/cg06/wearhouse/hooks/useGlobeData';

const CustomerStatistics: React.FC = () => {
  const { statisticsData } = useGlobeData();
  

  const statisticsDataList = Object.keys(statisticsData).map(
    (i: string, index: number) => ({
      value: statisticsData[i] || 0,
      label: i.split('-')[0],
      icon: [one, two, three, four, five, six][index],
      unit: ['','','','', 'PCS','PCS'][index],
    }),
  );

  return (
    <div
      style={{
        width: '100%',
        padding: '12px',
        borderRadius: 16,
        flex: 1,
        marginRight: '16px',
        marginTop: '60px',
        paddingLeft: '20px',
        paddingRight: '160px',
      }}
    >
      <div>
        <Flex wrap="wrap" justify='space-between'>
          {statisticsDataList.map((i: any, index: number) => (
            <Box
              icon={i.icon}
              key={index}
              text={i.label}
              label="物流伙伴数"
              value={Number(i.value || 0)}
              unit={i.unit}
            />
          ))}
        </Flex>
      </div>
    </div>
  );
};

export default CustomerStatistics;
